<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情页</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="gooddetail.css">
</head>

<body>
    <header>
        <div class="nav">
            <!-- 头部左侧文字链接 -->
            <ul class="nav-left">
                <li class="conweixin">
                    <a href="javascript:;">关注</a>
                    <div class="weixin">
                        <div class="weixin-con">
                            <img src="img/weChat.jpg" alt="">
                            <p>关注公众号</p>
                        </div>
                    </div>
                </li>
                <li class="loadapp">
                    <a href="javascript:;">下载APP</a>
                    <div class="app">
                        <div class="app-con">
                            <img src="img/app.jpg" alt="">
                            <p>优购app下载</p>
                        </div>
                    </div>
                </li>
            </ul>

            <!-- 头部右侧文字链接 -->
            <ul class="nav-right">
                <li>
                    <a href="login.html" class="login">登录</a>
                    <span>/</span>
                    <a href="register.html" class="register">注册</a>
                </li>
                <li class="collect">
                    <a href="javascript:;"><i></i>收藏</a>
                </li>
                <li class="bag">
                    <a href="javascript:;"><i></i>购物袋</a>
                </li>
                <li class="publicword">
                    <a href="javascript:;">公告</a>
                    <div class="public">
                        <ul class="public-con">
                            <li><a href="javascript:;" class="red">近期物流情况安排通知</a></li>
                            <li><a href="javascript:;">优购客服电话变更</a></li>
                            <li><a href="javascript:;">关闭分享购频道</a></li>
                            <li><a href="javascript:;">提醒会员谨防诈骗电话</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </header>

    <!-- logo区 -->
    <!-- logo图 -->
    <h1>
        <a href="javascript:;"><img src="img/logo.png" alt=""></a>
    </h1>
    <div class="logo">

        <!-- 首页列表 -->
        <div class="list">
            <ul class="list-con">
                <li><a href="index.html">首页</a></li>
                <li>
                    <a href="#">女鞋</a>
                    <!-- 女鞋 -->
                    <div class="listall">
                        <div class="listall-con">
                            <dl class="dl-first dl-duo">
                                <dt><a href="#" target="_blank">品牌</a></dt>
                                <dd>
                                    <a href="#" target="_blank">百丽</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">他她</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">天美意</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">思加图</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">森达</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">真美诗</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">妙丽</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">拔佳</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">暇步士</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">百思图</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">圣伽步</a>
                                </dd>
                            </dl>
                            <dl class="dl-shao">
                                <dt><a href="#" target="_blank">热销推荐</a></dt>
                                <dd>
                                    <a href="#" target="_blank">2020新款单鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">专柜同款</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">人气TOP</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">老爹鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">乐福鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">小白鞋</a>
                                </dd>
                            </dl>
                            <dl class="dl-shao">
                                <dt><a href="#" target="_blank">女士靴子</a></dt>
                                <dd>
                                    <a href="#" target="_blank">短靴</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">中靴</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">长靴</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">绒里靴</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">马丁靴</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">雪地靴</a>
                                </dd>
                            </dl>
                            <dl class="dl-duo">
                                <dt><a href="#" target="_blank">女士单鞋</a></dt>
                                <dd>
                                    <a href="#" target="_blank">浅口鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">满帮鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">尖头鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">乐福鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">玛丽珍</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">英伦风</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">休闲鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">运动鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">高跟鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">平底鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">细跟鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">粗跟鞋</a>
                                </dd>
                            </dl>
                            <dl class="dl-shao">
                                <dt><a href="#" target="_blank">女士凉鞋</a></dt>
                                <dd>
                                    <a href="#" target="_blank">2020新款</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">穆勒凉鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">中空凉鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">纯凉鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">凉拖</a>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#">男鞋</a>
                    <!-- 男鞋 -->
                    <div class="listall">
                        <div class="listall-con">
                            <dl class="dl-first dl-duo">
                                <dt><a href="#" target="_blank">品牌</a></dt>
                                <dd>
                                    <a href="#" target="_blank">百丽</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">森达</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">暇步士</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">拔佳</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">天美意</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">他她</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">百思图</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">伐拓</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">圣伽步</a>
                                </dd>
                            </dl>
                            <dl class="dl-shao">
                                <dt><a href="#" target="_blank">热销推荐</a></dt>
                                <dd>
                                    <a href="#" target="_blank">2020新款</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">专柜同款</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">热销TOP</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">小白鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">老爹鞋</a>
                                </dd>
                            </dl>
                            <dl class="dl-duo">
                                <dt><a href="#" target="_blank">精选分类</a></dt>
                                <dd>
                                    <a href="#" target="_blank">正装鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">休闲鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">系带鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">懒人鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">乐福鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">布洛克鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">满帮鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">纯凉鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">冬靴</a>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#">运动</a>
                    <!-- 运动 -->
                    <div class="listall">
                        <div class="listall-con">
                            <dl class="dl-first dl-duo">
                                <dt><a href="#" target="_blank">品牌</a></dt>
                                <dd>
                                    <a href="#" target="_blank">阿迪达斯</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">耐克</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">三叶草</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">阿迪休闲</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">彪马</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">匡威</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">鬼冢虎</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">亚瑟士</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">锐步</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">万斯</a>
                                </dd>
                            </dl>
                            <dl class="dl-duo">
                                <dt><a href="#" target="_blank">运动鞋</a></dt>
                                <dd>
                                    <a href="#" target="_blank">跑步鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">休闲鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">复刻鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">篮球鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">户外鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">帆布鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">网球鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">综训鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">健步鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">足球鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">凉鞋/拖鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">包配</a>
                                </dd>
                            </dl>
                            <dl class="dl-shao">
                                <dt><a href="#" target="_blank">运动服</a></dt>
                                <dd>
                                    <a href="#" target="_blank">夹克</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">卫衣/套头衫</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">长裤</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">T恤</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">POLP衫</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">短裤</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">胸衣</a>
                                </dd>
                            </dl>
                            <dl class="dl-duo">
                                <dt><a href="#" target="_blank">关键词</a></dt>
                                <dd>
                                    <a href="#" target="_blank">专柜同款</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">夏季新品</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">贝壳头鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">SALE</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">玛丽珍</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">英伦风</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">休闲鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">运动鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">高跟鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">平底鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">细跟鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">粗跟鞋</a>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#">户外</a>
                    <!-- 户外 -->
                    <div class="listall">
                        <div class="listall-con">
                            <dl class="dl-first dl-shao">
                                <dt><a href="#" target="_blank">品牌</a></dt>
                                <dd>
                                    <a href="#" target="_blank">CAT</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">添柏岚</a>
                                </dd>
                            </dl>
                            <dl class="dl-shao">
                                <dt><a href="#" target="_blank">户外鞋</a></dt>
                                <dd>
                                    <a href="#" target="_blank">工装鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">休闲鞋</a>
                                </dd>
                            </dl>
                            <dl class="dl-shao">
                                <dt><a href="#" target="_blank">户外服</a></dt>
                                <dd>
                                    <a href="#" target="_blank">T恤</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">休闲裤</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">羽绒服</a>
                                </dd>
                            </dl>
                            <dl class="dl-shao">
                                <dt><a href="#" target="_blank">关键词</a></dt>
                                <dd>
                                    <a href="#" target="_blank">速干</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">大黄靴</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">热销TOP</a>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#">儿童</a>
                    <!-- 儿童 -->
                    <div class="listall">
                        <div class="listall-con">
                            <dl class="dl-first dl-shao">
                                <dt><a href="#" target="_blank">热门品牌</a></dt>
                                <dd>
                                    <a href="#" target="_blank">阿迪</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">耐克</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">三叶草</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">鬼冢虎</a>
                                </dd>
                            </dl>
                            <dl class="dl-shao">
                                <dt><a href="#" target="_blank">童鞋</a></dt>
                                <dd>
                                    <a href="#" target="_blank">复刻鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">休闲鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">篮球鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">跑步鞋</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">训练鞋</a>
                                </dd>
                            </dl>
                            <dl class="dl-shao">
                                <dt><a href="#" target="_blank">童装</a></dt>
                                <dd>
                                    <a href="#" target="_blank">儿童套装</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">裤装</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">外套/风衣</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">卫衣</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">棉服/羽绒服</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">裙装</a>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="/goodslist">箱包</a>
                    <!-- 箱包 -->
                    <div class="listall">
                        <div class="listall-con">
                            <dl class="dl-first dl-duo">
                                <dt><a href="#" target="_blank">品牌</a></dt>
                                <dd>
                                    <a href="#" target="_blank">百丽箱包</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">百思图</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">天美意</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">他她</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">思加图</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">拔佳</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">真美诗</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">妙丽</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">圣伽步</a>
                                </dd>
                            </dl>
                            <dl class="dl-shao">
                                <dt><a href="#" target="_blank">热销推荐</a></dt>
                                <dd>
                                    <a href="#" target="_blank">2019新款</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">人气TOP</a>
                                </dd>
                            </dl>
                            <dl class="dl-shao">
                                <dt><a href="#" target="_blank">魅力女包</a></dt>
                                <dd>
                                    <a href="#" target="_blank">手提/手包</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">单肩/斜挎</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">双肩包</a>
                                </dd>
                            </dl>
                            <dl class="dl-shao">
                                <dt><a href="#" target="_blank">经典男包</a></dt>
                                <dd>
                                    <a href="#" target="_blank">单肩/斜挎</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">手提/手包</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">双肩包</a>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </li>
            </ul>

            <div class="search">
                <input type="text">
                <span></span>
            </div>
        </div>
    </div>

    <!-- 菜单 -->
    <ul class="menu">
        <li>您当前位置：</li>
        <li>
            <a href="index.html">首页</a>
            <span>&nbsp;>&nbsp;</span>
        </li>
        <li>
            <a href="goodslist.html">箱包</a>
            <span>&nbsp;>&nbsp;</span>
        </li>
        <li>
            <a href="#">女包</a>
            <span>&nbsp;>&nbsp;</span>
        </li>
        <li>
            <a href="#">单肩包/斜挎包</a>
            <span>&nbsp;>&nbsp;</span>
        </li>
    </ul>

    <% details.forEach(function(item){ %>
        <%- item.detail %>
            <% }) %>
                <!-- 1 -->
                <!-- <div class="content">
        <div class="imgs">
            <ul class="img-small">
                <li class="point"><img src="img/b11.jpg" alt=""><i></i></li>
                <li><img src="img/b12.jpg" alt=""><i></i></li>
                <li><img src="img/b13.jpg" alt=""><i></i></li>
                <li><img src="img/b14.jpg" alt=""><i></i></li>
                <li><img src="img/b15.jpg" alt=""><i></i></li>
                <li><img src="img/b16.jpg" alt=""><i></i></li>
                <li><img src="img/b17.jpg" alt=""><i></i></li>
            </ul>
            <ul class="img-big">
                <li class="focus" class="smallbox">
                    <img src="img/b011.jpg" alt="">
                </li>
                <li class="smallbox"><img src="img/b012.jpg" alt=""></li>
                <li><img src="img/b013.jpg" alt=""></li>
                <li><img src="img/b014.jpg" alt=""></li>
                <li><img src="img/b015.jpg" alt=""></li>
                <li><img src="img/b016.jpg" alt=""></li>
                <li><img src="img/b017.jpg" alt=""></li>
            </ul>
            <div class="mask"></div>
            <div class=""></div>

            <ul class="img-bigger">
                <li>
                    <img src="img/b0011.jpg" alt="">
                </li>
                <li><img src="img/b0012.jpg" alt=""></li>
                <li><img src="img/b0013.jpg" alt=""></li>
                <li><img src="img/b0014.jpg" alt=""></li>
                <li><img src="img/b0015.jpg" alt=""></li>
                <li><img src="img/b0016.jpg" alt=""></li>
                <li><img src="img/b0017.jpg" alt=""></li>
            </ul>
        </div>
        <div class="word">
            <div class="top">
                <img src="img/w10.png" alt="" class="flag">
                <h3>BELLE/百丽箱包2020新商场同款菱格链条包单肩斜挎女包X4926AN0</h3>
                <h4>￥309<span>￥799</span></h4>
            </div>
            <div class="middle">
                <div class="color">
                    <span class="cf">颜色：</span>
                    <span>
                        <p><img src="img/011.jpg" alt=""><i></i></p>
                        <p><img src="img/012.jpg" alt=""><i></i></p>
                        <p><img src="img/013.jpg" alt=""><i></i></p>
                    </span>
                </div>

                <div class="size">
                    <span sf>尺码：</span>
                    <span><p>F<i></i></p></span>
                </div>

                <div class="count">
                    <span class="numword">数量：</span>
                    <span class="num">1</span>
                    <span class="btn">
                        <b class="add"></b>
                        <b class="del"></b>
                    </span>
                </div>
            </div>
            <ul class="shop">
                <li>
                    <button id="addtocar">加入购物袋</button>
                </li>
                <li>
                    <button id="tobuy">立即购买</button>
                </li>
            </ul>
        </div>
    </div> -->

                <!-- 2 -->
                <!-- <div class="content">
        <div class="imgs">
            <ul class="img-small">
                <li class="point"><img src="img/b21.jpg" alt=""><i></i></li>
                <li><img src="img/b22.jpg" alt=""><i></i></li>
                <li><img src="img/b23.jpg" alt=""><i></i></li>
                <li><img src="img/b24.jpg" alt=""><i></i></li>
                <li><img src="img/b25.jpg" alt=""><i></i></li>
                <li><img src="img/b26.jpg" alt=""><i></i></li>
                <li><img src="img/b27.jpg" alt=""><i></i></li>
            </ul>
            <ul class="img-big">
                <li class="focus">
                    <img src="img/b021.jpg" alt="">
                </li>
                <li><img src="img/b022.jpg" alt=""></li>
                <li><img src="img/b023.jpg" alt=""></li>
                <li><img src="img/b024.jpg" alt=""></li>
                <li><img src="img/b025.jpg" alt=""></li>
                <li><img src="img/b026.jpg" alt=""></li>
                <li><img src="img/b027.jpg" alt=""></li>
            </ul>

            <ul class="img-bigger">
                <li>
                    <img src="img/b0021.jpg" alt="">
                </li>
                <li><img src="img/b0022.jpg" alt=""></li>
                <li><img src="img/b0023.jpg" alt=""></li>
                <li><img src="img/b0024.jpg" alt=""></li>
                <li><img src="img/b0025.jpg" alt=""></li>
                <li><img src="img/b0026.jpg" alt=""></li>
                <li><img src="img/b0027.jpg" alt=""></li>
            </ul>
        </div>
        <div class="word">
            <div class="top">
                <img src="img/w10.png" alt="" class="flag">
                <h3>BELLE/百丽箱包2020新商场同款菱格链条包单肩斜挎女包X4885BN0</h3>
                <h4>￥239<span>￥799</span></h4>
            </div>
            <div class="middle">
                <div class="color">
                    <span class="cf">颜色：</span>
                    <span>
                        <p><img src="img/021.jpg" alt=""><i></i></p>
                        <p><img src="img/022.jpg" alt=""><i></i></p>
                        <p><img src="img/023.jpg" alt=""><i></i></p>
                    </span>
                </div>

                <div class="size">
                    <span sf>尺码：</span>
                    <span><p>F<i></i></p></span>
                </div>

                <div class="count">
                    <span class="numword">数量：</span>
                    <span class="num">1</span>
                    <span class="btn">
                        <b class="add"></b>
                        <b class="del"></b>
                    </span>
                </div>
            </div>
            <ul class="shop">
                <li>
                    <button id="addtocar">加入购物袋</button>
                </li>
                <li>
                    <button id="tobuy">立即购买</button>
                </li>
            </ul>
        </div>
    </div> -->

                <!-- 3,4 -->
                <!-- <div class="content">
        <div class="imgs">
            <ul class="img-small">
                <li class="point"><img src="img/b31.jpg" alt=""><i></i></li>
                <li><img src="img/b32.jpg" alt=""><i></i></li>
                <li><img src="img/b33.jpg" alt=""><i></i></li>
                <li><img src="img/b34.jpg" alt=""><i></i></li>
                <li><img src="img/b35.jpg" alt=""><i></i></li>
                <li><img src="img/b36.jpg" alt=""><i></i></li>
                <li><img src="img/b37.jpg" alt=""><i></i></li>
            </ul>
            <ul class="img-big">
                <li class="focus">
                    <img src="img/b031.jpg" alt="">
                </li>
                <li><img src="img/b032.jpg" alt=""></li>
                <li><img src="img/b033.jpg" alt=""></li>
                <li><img src="img/b034.jpg" alt=""></li>
                <li><img src="img/b035.jpg" alt=""></li>
                <li><img src="img/b036.jpg" alt=""></li>
                <li><img src="img/b037.jpg" alt=""></li>
            </ul>

            <ul class="img-bigger">
                <li>
                    <img src="img/b0031.jpg" alt="">
                </li>
                <li><img src="img/b0032.jpg" alt=""></li>
                <li><img src="img/b0033.jpg" alt=""></li>
                <li><img src="img/b0034.jpg" alt=""></li>
                <li><img src="img/b0035.jpg" alt=""></li>
                <li><img src="img/b0036.jpg" alt=""></li>
                <li><img src="img/b0037.jpg" alt=""></li>
            </ul>
        </div>
        <div class="word">
            <div class="top">
                <img src="img/w10.png" alt="" class="flag">
                <h3>BELLE/百丽2020冬新商场同款人造革时尚背单肩马鞍包X5424DX0</h3>
                <h4>￥339<span>￥699</span></h4>
            </div>
            <div class="middle">
                <div class="color">
                    <span class="cf">颜色：</span>
                    <span>
                        <p><img src="img/031.jpg" alt=""><i></i></p>
                    </span>
                </div>

                <div class="size">
                    <span sf>尺码：</span>
                    <span><p>F<i></i></p></span>
                </div>

                <div class="count">
                    <span class="numword">数量：</span>
                    <span class="num">1</span>
                    <span class="btn">
                        <b class="add"></b>
                        <b class="del"></b>
                    </span>
                </div>
            </div>
            <ul class="shop">
                <li>
                    <button id="addtocar">加入购物袋</button>
                </li>
                <li>
                    <button id="tobuy">立即购买</button>
                </li>
            </ul>
        </div>
    </div>


    <div class="content">
        <div class="imgs">
            <ul class="img-small">
                <li class="point"><img src="img/b41.jpg" alt=""><i></i></li>
                <li><img src="img/b42.jpg" alt=""><i></i></li>
                <li><img src="img/b43.jpg" alt=""><i></i></li>
                <li><img src="img/b44.jpg" alt=""><i></i></li>
                <li><img src="img/b45.jpg" alt=""><i></i></li>
                <li><img src="img/b46.jpg" alt=""><i></i></li>
                <li><img src="img/b47.jpg" alt=""><i></i></li>
            </ul>
            <ul class="img-big">
                <li class="focus">
                    <img src="img/b041.jpg" alt="">
                </li>
                <li><img src="img/b042.jpg" alt=""></li>
                <li><img src="img/b043.jpg" alt=""></li>
                <li><img src="img/b044.jpg" alt=""></li>
                <li><img src="img/b045.jpg" alt=""></li>
                <li><img src="img/b046.jpg" alt=""></li>
                <li><img src="img/b047.jpg" alt=""></li>
            </ul>

            <ul class="img-bigger">
                <li>
                    <img src="img/b0041.jpg" alt="">
                </li>
                <li><img src="img/b0042.jpg" alt=""></li>
                <li><img src="img/b0043.jpg" alt=""></li>
                <li><img src="img/b0044.jpg" alt=""></li>
                <li><img src="img/b0045.jpg" alt=""></li>
                <li><img src="img/b0046.jpg" alt=""></li>
                <li><img src="img/b0047.jpg" alt=""></li>
            </ul>
        </div>
        <div class="word">
            <div class="top">
                <img src="img/w10.png" alt="" class="flag">
                <h3>BELLE/百丽箱包2020秋新商场同款牛剖层皮革手提单肩包X5349CX0</h3>
                <h4>￥459<span>￥1,009</span></h4>
            </div>
            <div class="middle">
                <div class="color">
                    <span class="cf">颜色：</span>
                    <span>
                        <p><img src="img/041.jpg" alt=""><i></i></p>
                        <p><img src="img/042.jpg" alt=""><i></i></p>
                        <p><img src="img/043.jpg" alt=""><i></i></p>
                    </span>
                </div>

                <div class="size">
                    <span sf>尺码：</span>
                    <span><p>F<i></i></p></span>
                </div>

                <div class="count">
                    <span class="numword">数量：</span>
                    <span class="num">1</span>
                    <span class="btn">
                        <b class="add"></b>
                        <b class="del"></b>
                    </span>
                </div>
            </div>
            <ul class="shop">
                <li>
                    <button id="addtocar">加入购物袋</button>
                </li>
                <li>
                    <button id="tobuy">立即购买</button>
                </li>
            </ul>
        </div>
    </div> -->
                <!-- 5 -->
                <!-- <div class="content">
        <div class="imgs">
            <ul class="img-small">
                <li class="point"><img src="img/b51.jpg" alt=""><i></i></li>
                <li><img src="img/b52.jpg" alt=""><i></i></li>
                <li><img src="img/b53.jpg" alt=""><i></i></li>
                <li><img src="img/b54.jpg" alt=""><i></i></li>
                <li><img src="img/b55.jpg" alt=""><i></i></li>
                <li><img src="img/b56.jpg" alt=""><i></i></li>
                <li><img src="img/b57.jpg" alt=""><i></i></li>
            </ul>
            <ul class="img-big">
                <li class="focus">
                    <img src="img/b051.jpg" alt="">
                </li>
                <li><img src="img/b052.jpg" alt=""></li>
                <li><img src="img/b053.jpg" alt=""></li>
                <li><img src="img/b054.jpg" alt=""></li>
                <li><img src="img/b055.jpg" alt=""></li>
                <li><img src="img/b056.jpg" alt=""></li>
                <li><img src="img/b057.jpg" alt=""></li>
            </ul>

            <ul class="img-bigger">
                <li>
                    <img src="img/b0011.jpg" alt="">
                </li>
                <li><img src="img/b0052.jpg" alt=""></li>
                <li><img src="img/b0053.jpg" alt=""></li>
                <li><img src="img/b0054.jpg" alt=""></li>
                <li><img src="img/b0055.jpg" alt=""></li>
                <li><img src="img/b0056.jpg" alt=""></li>
                <li><img src="img/b0057.jpg" alt=""></li>
            </ul>
        </div>
        <div class="word">
            <div class="top">
                <img src="img/w10.png" alt="" class="flag">
                <h3>BELLE/百丽2020冬新商场同款压花人造革时尚单肩马鞍包X5424DX0</h3>
                <h4>￥339<span>￥699</span></h4>
            </div>
            <div class="middle">
                <div class="color">
                    <span class="cf">颜色：</span>
                    <span>
                        <p><img src="img/051.jpg" alt=""><i></i></p>
                        <p><img src="img/052.jpg" alt=""><i></i></p>
                    </span>
                </div>

                <div class="size">
                    <span sf>尺码：</span>
                    <span><p>F<i></i></p></span>
                </div>

                <div class="count">
                    <span class="numword">数量：</span>
                    <span class="num">1</span>
                    <span class="btn">
                        <b class="add"></b>
                        <b class="del"></b>
                    </span>
                </div>
            </div>
            <ul class="shop">
                <li>
                    <button id="addtocar">加入购物袋</button>
                </li>
                <li>
                    <button id="tobuy">立即购买</button>
                </li>
            </ul>
        </div>
    </div>-->
                <!-- 6 -->
                <!-- <div class="content">
        <div class="imgs">
            <ul class="img-small">
                <li class="point"><img src="img/b61.jpg" alt=""><i></i></li>
                <li><img src="img/b62.jpg" alt=""><i></i></li>
                <li><img src="img/b63.jpg" alt=""><i></i></li>
                <li><img src="img/b64.jpg" alt=""><i></i></li>
                <li><img src="img/b65.jpg" alt=""><i></i></li>
                <li><img src="img/b66.jpg" alt=""><i></i></li>
                <li><img src="img/b67.jpg" alt=""><i></i></li>
            </ul>
            <ul class="img-big">
                <li class="focus">
                    <img src="img/b061.jpg" alt="">
                </li>
                <li><img src="img/b062.jpg" alt=""></li>
                <li><img src="img/b063.jpg" alt=""></li>
                <li><img src="img/b064.jpg" alt=""></li>
                <li><img src="img/b065.jpg" alt=""></li>
                <li><img src="img/b066.jpg" alt=""></li>
                <li><img src="img/b067.jpg" alt=""></li>
            </ul>

            <ul class="img-bigger">
                <li>
                    <img src="img/b0061.jpg" alt="">
                </li>
                <li><img src="img/b0062.jpg" alt=""></li>
                <li><img src="img/b0063.jpg" alt=""></li>
                <li><img src="img/b0064.jpg" alt=""></li>
                <li><img src="img/b0065.jpg" alt=""></li>
                <li><img src="img/b0066.jpg" alt=""></li>
                <li><img src="img/b0067.jpg" alt=""></li>
            </ul>
        </div>
        <div class="word">
            <div class="top">
                <img src="img/w10.png" alt="" class="flag">
                <h3>百思图2020秋季新款极简通勤风拼色手提斜挎托特子母包女X1930CX0</h3>
                <h4>￥189<span>￥499</span></h4>
            </div>
            <div class="middle">
                <div class="color">
                    <span class="cf">颜色：</span>
                    <span>
                        <p><img src="img/061.jpg" alt=""><i></i></p>
                        <p><img src="img/062.jpg" alt=""><i></i></p>
                    </span>
                </div>

                <div class="size">
                    <span sf>尺码：</span>
                    <span><p>F<i></i></p></span>
                </div>

                <div class="count">
                    <span class="numword">数量：</span>
                    <span class="num">1</span>
                    <span class="btn">
                        <b class="add"></b>
                        <b class="del"></b>
                    </span>
                </div>
            </div>
            <ul class="shop">
                <li>
                    <button id="addtocar">加入购物袋</button>
                </li>
                <li>
                    <button id="tobuy">立即购买</button>
                </li>
            </ul>
        </div>
    </div>-->
                <!-- 7 -->
                <!-- <div class="content">
                    <div class="imgs">
                        <ul class="img-small">
                            <li class="point"><img src="img/b71.jpg" alt=""><i></i></li>
                            <li><img src="img/b72.jpg" alt=""><i></i></li>
                            <li><img src="img/b73.jpg" alt=""><i></i></li>
                            <li><img src="img/b74.jpg" alt=""><i></i></li>
                            <li><img src="img/b75.jpg" alt=""><i></i></li>
                            <li><img src="img/b76.jpg" alt=""><i></i></li>
                            <li><img src="img/b77.jpg" alt=""><i></i></li>
                        </ul>
                        <ul class="img-big">
                            <li class="focus">
                                <img src="img/b071.jpg" alt="">
                            </li>
                            <li><img src="img/b072.jpg" alt=""></li>
                            <li><img src="img/b073.jpg" alt=""></li>
                            <li><img src="img/b074.jpg" alt=""></li>
                            <li><img src="img/b075.jpg" alt=""></li>
                            <li><img src="img/b076.jpg" alt=""></li>
                            <li><img src="img/b077.jpg" alt=""></li>
                        </ul>
            
                        <ul class="img-bigger">
                            <li>
                                <img src="img/b0071.jpg" alt="">
                            </li>
                            <li><img src="img/b0072.jpg" alt=""></li>
                            <li><img src="img/b0073.jpg" alt=""></li>
                            <li><img src="img/b0074.jpg" alt=""></li>
                            <li><img src="img/b0075.jpg" alt=""></li>
                            <li><img src="img/b0076.jpg" alt=""></li>
                            <li><img src="img/b0077.jpg" alt=""></li>
                        </ul>
                    </div>
                    <div class="word">
                        <div class="top">
                            <img src="img/w10.png" alt="" class="flag">
                            <h3>BELLE/百丽箱包2020冬新商场同款人造革时尚背提包X5363DX0</h3>
                            <h4>￥339<span>￥799</span></h4>
                        </div>
                        <div class="middle">
                            <div class="color">
                                <span class="cf">颜色：</span>
                                <span>
                                    <p><img src="img/071.jpg" alt=""><i></i></p>
                                    <p><img src="img/072.jpg" alt=""><i></i></p>
                                    <p><img src="img/073.jpg" alt=""><i></i></p>
                                </span>
                            </div>
            
                            <div class="size">
                                <span sf>尺码：</span>
                                <span><p>F<i></i></p></span>
                            </div>
            
                            <div class="count">
                                <span class="numword">数量：</span>
                                <span class="num">1</span>
                                <span class="btn">
                                    <b class="add"></b>
                                    <b class="del"></b>
                                </span>
                            </div>
                        </div>
                        <ul class="shop">
                            <li>
                                <button id="addtocar">加入购物袋</button>
                            </li>
                            <li>
                                <button id="tobuy">立即购买</button>
                            </li>
                        </ul>
                    </div>
                </div> -->
                <!-- 8 -->
                <!-- <div class="content">
                    <div class="imgs">
                        <ul class="img-small">
                            <li class="point"><img src="img/b81.jpg" alt=""><i></i></li>
                            <li><img src="img/b82.jpg" alt=""><i></i></li>
                            <li><img src="img/b83.jpg" alt=""><i></i></li>
                            <li><img src="img/b84.jpg" alt=""><i></i></li>
                            <li><img src="img/b85.jpg" alt=""><i></i></li>
                            <li><img src="img/b86.jpg" alt=""><i></i></li>
                            <li><img src="img/b87.jpg" alt=""><i></i></li>
                        </ul>
                        <ul class="img-big">
                            <li class="focus">
                                <img src="img/b081.jpg" alt="">
                            </li>
                            <li><img src="img/b082.jpg" alt=""></li>
                            <li><img src="img/b083.jpg" alt=""></li>
                            <li><img src="img/b084.jpg" alt=""></li>
                            <li><img src="img/b085.jpg" alt=""></li>
                            <li><img src="img/b086.jpg" alt=""></li>
                            <li><img src="img/b087.jpg" alt=""></li>
                        </ul>
            
                        <ul class="img-bigger">
                            <li>
                                <img src="img/b0081.jpg" alt="">
                            </li>
                            <li><img src="img/b0082.jpg" alt=""></li>
                            <li><img src="img/b0083.jpg" alt=""></li>
                            <li><img src="img/b0084.jpg" alt=""></li>
                            <li><img src="img/b0085.jpg" alt=""></li>
                            <li><img src="img/b0086.jpg" alt=""></li>
                            <li><img src="img/b0087.jpg" alt=""></li>
                        </ul>
                    </div>
                    <div class="word">
                        <div class="top">
                            <img src="img/w10.png" alt="" class="flag">
                            <h3>百思图2020秋季新款商场同款时尚简约大容量手提单肩包X2054CX0</h3>
                            <h4>￥199<span>￥399</span></h4>
                        </div>
                        <div class="middle">
                            <div class="color">
                                <span class="cf">颜色：</span>
                                <span>
                                    <p><img src="img/081.jpg" alt=""><i></i></p>
                                    <p><img src="img/082.jpg" alt=""><i></i></p>
                                    <p><img src="img/083.jpg" alt=""><i></i></p>
                                </span>
                            </div>
            
                            <div class="size">
                                <span sf>尺码：</span>
                                <span><p>F<i></i></p></span>
                            </div>
            
                            <div class="count">
                                <span class="numword">数量：</span>
                                <span class="num">1</span>
                                <span class="btn">
                                    <b class="add"></b>
                                    <b class="del"></b>
                                </span>
                            </div>
                        </div>
                        <ul class="shop">
                            <li>
                                <button id="addtocar">加入购物袋</button>
                            </li>
                            <li>
                                <button id="tobuy">立即购买</button>
                            </li>
                        </ul>
                    </div>
                </div> -->










                <div class="footer-top">
                    <ul>
                        <li>
                            <span></span> 正品保证
                        </li>
                        <li>
                            <span></span> 10天退换货
                        </li>
                        <li>
                            <span></span> 10天调补差价额
                        </li>
                        <li>
                            <span></span> 09:00--12:00在线客服
                        </li>
                    </ul>
                </div>



                <div class="footer-bot">
                    <ul class="content">
                        <li>
                            <dl>
                                <dt>新手帮助</dt>
                                <dd>
                                    <a href="#" target="_blank">交易条款协议</a>
                                </dd>
                                <dd>
                                    <a href="#" target="_blank">注册新用户</a>
                                </dd>
                                <dd>
                                    <a href="#">会员积分详情</a>
                                </dd>
                            </dl>
                        </li>
                        <li class="item">
                            <dl>
                                <dt>购物指南</dt>
                                <dd>
                                    <a href="#">订购流程</a>
                                </dd>
                                <dd>
                                    <a href="#">验货与签收</a>
                                </dd>
                                <dd>
                                    <a href="#">订单配送</a>
                                </dd>
                            </dl>
                        </li>
                        <li class="item">
                            <dl>
                                <dt>支付/配送</dt>
                                <dd>
                                    <a href="#">支付方式</a>
                                </dd>
                                <dd>
                                    <a href="#">配送方式</a>
                                </dd>
                                <dd>
                                    <a href="">配送时间及运费</a>
                                </dd>
                            </dl>
                        </li>
                        <li class="item">
                            <dl>
                                <dt>售后服务</dt>
                                <dd>
                                    <a href="#">退换货政策</a>
                                </dd>
                                <dd>
                                    <a href="#">退款说明</a>
                                </dd>
                                <dd>
                                    <a href="#">发票制度</a>
                                </dd>
                            </dl>
                        </li>
                        <li class="item">
                            <dl>
                                <dt>会员服务</dt>
                                <dd>
                                    <a href="#">找回密码</a>
                                </dd>
                                <dd>
                                    <a href="#">联系我们</a>
                                </dd>
                                <dd>&nbsp;</dd>
                            </dl>
                        </li>
                        <li class="item">
                            <dl>
                                <dt>优购客服</dt>
                                <dd>
                                    <a>在线咨询</a>
                                </dd>
                                <dd>
                                    <a href="javascript:;">Email: ygservice@belle.com.cn
                    </a>
                                </dd>
                                <dd>
                                    <a href="#">微信客服：优购时尚商城</a>
                                </dd>
                            </dl>
                        </li>
                    </ul>

                    <div class="three">
                        <div class="t-left">
                            <img src="img/n1.gif" alt="" style="width: 108px;height: 40px;">
                            <img src="img/n2.png" alt="">
                            <img src="img/n3.png" alt="">
                        </div>
                    </div>
                    <ul class="about">
                        <li>
                            <a href="#">关于优购</a>|
                        </li>
                        <li>
                            <a href="#">集团采购</a>|
                        </li>
                        <li>
                            <a href="#">招贤纳士</a>|
                        </li>
                        <li>
                            <a href="#">手机优购</a>|
                        </li>
                        <li>
                            <a href="#">联系我们</a>|
                        </li>
                        <li>
                            <a href="#">友情链接</a>
                        </li>
                    </ul>
                    <p>Copyright © 2011-2016 Yougou Technology Co., Ltd.粤ICP备09070608号 深公网安备：4403101910665 粤公网安备 44030502000017号</p>
                </div>

</body>

</html>

<script src="jquery.min.js"></script>
<script src="index.js"></script>
<script src=""></script>
<script>
    $(".img-small li").mouseenter(function() {
        let n = $(this).index();
        $(".img-small li").find("i").css("display", "none");
        $(this).find("i").css("display", "block");

        $(".img-big li").css("display", "none");
        // console.log(n);

        $(".img-big li").eq(n).css("display", "block");
    })

    //点击大图出现最大的图
    let count = 1;
    $(".img-bigger li").click(function() {
        if (count === 2) {
            $(this).css("display", "none");
            count--;
            // console.log(count);
        }
    })

    $(".img-big li").click(function() {
        if (count === 1) {
            let n = $(this).index();
            $(".img-bigger li").css("display", "none");
            $(".img-bigger li").eq(n).css("display", "block");
            count++;
            // console.log(count);
        }
    })


    //产品数量加减
    $(".add").click(function() {
        $(".num").html(parseInt($(".num").html()) + 1);
    })

    $(".del").click(function() {
        if ($(".num").html() > 1) {
            $(".num").html(parseInt($(".num").html()) - 1);
        } else {
            $(".num").html(1);
        }
    })

    //获取当前页面的登录名
    let uname = sessionStorage.getItem("uname");

    //点击购物车链接
    if (uname) {
        $(".bag a").attr("href", `/car?username=${uname}`);
        $(".first").html($('<a href="javascript:;" class="mylist">我的订单</a>'))

        $(".mylist").click(function() {
            let ispay = 1;

            $(this).attr("href", `/look?username=${uname}&ispay=${ispay}`)
        })
    } else {
        $(".bag a").click(function() {

            alert("请先登录/注册您的账号")
        })
    }

    //点击加入购物车
    $("#addtocar").click(function() {
        if (uname) {
            let img = $(".point img").attr("src");
            let gname = $(".top h3").html();
            let nprice = $(".top h4").html();
            let count = $(".num").html();
            // console.log(nprice);
            //价格取出来格式不对，需要去掉后面的span
            let price = "";
            for (let i = 0; i < nprice.length; i++) {
                if (nprice[i] === "￥") {
                    continue;
                }
                if (nprice[i] === "<") {
                    break;
                }
                price = price + nprice[i];
            }
            // console.log(count);
            $.ajax({
                url: "http://10.35.164.244:8080/insert",
                data: {
                    username: uname,
                    img: img,
                    gname: gname,
                    price: price,
                    count: count,
                },
                success(data) {
                    if (data === "success") {
                        alert("成功加入购物车，请前往购物车查看")
                    }
                }
            })


        } else {
            alert("请先登录您的账号！")
        }
    })
</script>